<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <top></top>

        <div class="body-box">
          <div class="contentBox">
            <div class="item">
              <div class="pd-16 leftTop">
                <dv-border-box-12>
                  <left-top @on-click="childrenTypeClick" @cur-type="curType"></left-top>
                </dv-border-box-12>
              </div>
              <div class="pd-16 leftBottom">
                <dv-border-box-13>
                  <left-bottom :dataList="personList" @on-click="personClick"></left-bottom>
                </dv-border-box-13>
              </div>
            </div>
            <div class="item">
              <div class="map" style="height: 665px">
                <div class="mapTop">
                  <div class="bg-color-black">
                    <div class="left">
                      <div class="avatarImg"><img :src="avatarImg"> </div>
                      <div class="info">
                        <p>姓名：{{personInfo.personName}}</p>
                        <p>职业：{{personInfo.personTypeStr}}</p>
                        <p>生日：{{personInfo.birthday}}</p>
                        <p>个人信息：{{personInfo.height}}cm/{{personInfo.weight}}kg/{{personInfo.starSign}}/{{personInfo.bloodType}}</p>
                        <p>当前剧组：{{personInfo.currentCrew}}({{personInfo.currentRole}})</p>
                      </div>
                    </div>
                    <div class="right">
                      <centerRightChart :data="dataValue" />
                    </div>
                  </div>
                </div>
                <div class="mapCenter">
                  <div class="bg-color-black">
                    <div class="scrollTit">
                      <span class="item1">#</span>
                      <span class="item2 text-l">年份</span>
                      <span class="item2 text-l">剧名</span>
                      <span class="item3 text-r">角色</span>
                    </div>
                    <vue-seamless-scroll :data="personWorkList" :class-option="classOption" class="scrollContent">
                      <div class="scrollList" v-for="(item, i) in personWorkList" :key="item.workExpId">
                        <span class="item1">{{i+1}}</span>
                        <span class="item2 text-l">{{item.workDate}}</span>
                        <span class="item2 text-l">{{item.crewName}}</span>
                        <span class="item3 text-r">{{item.workRole}}</span>
                      </div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <div class="mapBottom">
                <center-bottom></center-bottom>
              </div>
            </div>
            <div class="item">
              <div class="pd-16 rightTop">
                <dv-border-box-13>
                  <right-top></right-top>
                </dv-border-box-13>
              </div>
              <div class="pd-16 rightBottom">
                <!--<div class=" rightBottomBox"></div>-->
                <dv-border-box-13>
                  <right-bottom1></right-bottom1>
                </dv-border-box-13>
              </div>
              <div class="pd-16 rightBottom">
                <dv-border-box-1 :color="['#9b2524','#f30705']">
                  <right-bottom2></right-bottom2>
                </dv-border-box-1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import top from '../components/top'
import leftTop from "./components/leftTop"
import leftBottom from "./components/leftBottom"
import centerBottom from './components/centerBottom'
import centerRightChart from './components/centerRightChart'
import rightTop from "./components/rightTop"
import rightBottom1 from "./components/rightBottom1";
import rightBottom2 from "./components/rightBottom2";


export default {
  mixins: [ drawMixin ],
  data() {
    return {
      personList: [],
      personInfo: {},
      dataValue: [],
      avatarImg: '',
      personWorkList: [],
      workList: [
        { crewName: "《龙马精神》", workDate: "2021-12-21", workRole: "男一"},
        { crewName: "《长津湖》", workDate: "2021-08-18", workRole: "客串,导演"},
        { crewName: "《龙马精神1》", workDate: "2021-12-21", workRole: "男一"},
        { crewName: "《长津湖1》", workDate: "2021-08-18", workRole: "客串,导演"},
        { crewName: "《龙马精神2》", workDate: "2021-12-21", workRole: "男一"},
        { crewName: "《长津湖2》", workDate: "2021-08-18", workRole: "客串,导演"},
        { crewName: "《龙马精神3》", workDate: "2021-12-21", workRole: "男一"},
        { crewName: "《长津湖3》", workDate: "2021-08-18", workRole: "客串,导演"},
        { crewName: "《龙马精神4》", workDate: "2021-12-21", workRole: "男一"},
        { crewName: "《长津湖4》", workDate: "2021-08-18", workRole: "客串,导演"},
      ],
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    }
  },
  components: {
    top, leftTop, leftBottom, centerBottom, centerRightChart, rightTop, rightBottom1, rightBottom2,
  },
  mounted() {
    this.cancelLoading()
  },
  computed: {
    classOption () {
      return {
        singleHeight: 36,
        waitTime: 2000,
        step: 1,
        hoverStop: true
      }
    }
  },
  methods: {
    childrenTypeClick(data){
      this.$http.get(this.$apis.personinfo.findListByParams, {personType: data.dictValue, personName: ''}).then(res => {
        this.personList = res.data
      })
    },
    curType(data){
      this.$http.get(this.$apis.personinfo.findListByParams, {personType: data.dictValue, personName: ''}).then(res => {
        this.personList = res.data
        this.personClick(res.data[0])
      })
    },
    personClick(data){
      this.personInfo = data
      this.dataValue = [data.dedicatValue,data.educatValue,data.expValue,data.popuValue,data.proValue,data.worksValue]
      this.$http.get(this.$apis.personWorkExp.findListByPersonId, {personId: data.personId}).then(res => {
        this.personWorkList = res.data
      })
      this.avatarImg = require(`@/assets/avatar/${data.avatarImg}`)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    goRouter(name){
      this.$router.push({name: name})
    }
  }
}
</script>

<style lang="scss">
@import '~@/assets/scss/index.scss';
</style>
<style scoped lang="scss">
  .contentBox { display: grid; grid-template-columns: 22% 50% 28%; }
  .pd-16 { padding: 8px}
  .mapTop {
    $box-width: 100%;
    $box-height: 300px;
    padding: 16px 6px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
      height: $box-height - 12px;
      border-radius: 10px; padding: 16px; display: flex;
      /*flex-wrap: wrap;*/
      align-items: center;
      align-content: space-between;
      justify-content: space-around;
    }
    .left { width: 58%; display: flex;
      .avatarImg { width: 180px; height: 210px; overflow: hidden;
        border: 1px solid #343f4b; padding: 5px;
        img {width: 100%; display: block;}
      }
      .info { margin-left: 16px; font-size: 17px; padding-top: 15px;
        p { line-height: 38px; border-bottom: 1px dashed #343f4b}
      }
    }
    .right { width: 40%; height: 280px}
  }
  .mapCenter {
    $box-width: 100%;
    $box-height: 340px;
    padding: 16px 6px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
      height: $box-height - 12px;
      border-radius: 10px; padding: 16px;
    }
    .scrollTit { display: grid; grid-template-columns: 50px 25% 42% 25%; background-color: rgb(0, 186, 255); height: 36px; line-height: 36px;
      span{color: #fff; text-align: center; display: block}
      .text-l { text-align: left}
      .text-r { text-align: right}
    }
    .scrollList {
      display: grid; grid-template-columns: 50px 25% 42% 25%; height: 36px; line-height: 36px;
      background-color: rgb(10, 39, 50);
      span{color: #fff; text-align: center; display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      .text-l { text-align: left}
      .text-r { text-align: right}
    }
    .scrollList:nth-child(2n){background-color: rgb(0, 59, 81);}
    .scrollContent {
      height: $box-height - 80px;;
      overflow: hidden;
    }
  }
  /*.rightBottomBox{
    $box-width: 100%;
    $box-height: 580px;
    padding: 16px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
      height: $box-height - 32px;
      border-radius: 10px; padding: 16px;
    }
  }*/
</style>
